import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import store from '@/.storybook/store'
import detailPageSimple from '../../../pages/detailPageSimple.vue'

<Meta
  title="Pages/Freebrand/Detail Page Simple"
  component={detailPageSimple}
  argTypes={{
    isOpen: { name: 'Is open', control: { type: 'boolean' } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { detailPageSimple },
  store: store,
  template: '<detailPageSimple :isFreebrand="true" />',
})

# Freebrand Simple page example

<a href="?path=/story/pages-freebrand-detail-page-simple--example">
  Go to the Canvas Tab
</a>

---

<a href="?id=pages-freebrand-detail-page-simple--example" target="_blank">
  Open page in full width in a new tab
</a>

Freebrand design. See bottom of page for configuration options.

<Canvas>
  <Story
    name="Example"
    args={{
      isOpen: false,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

Overwrite the colors by setting the color style attributes on the body

```javascript
const freebrandColors = [
  { key: '--color-primary-50', value: '#eaffe9' },
  { key: '--color-primary-100', value: '#d3ebd2' },
  { key: '--color-primary-200', value: '#bdd8bc' },
  { key: '--color-primary-300', value: '#a7c4a6' },
  { key: '--color-primary-400', value: '#91b191' },
  { key: '--color-primary-500', value: '#7c9f7c' },
  { key: '--color-primary-600', value: '#678d67' },
  { key: '--color-primary-700', value: '#537b54' },
  { key: '--color-primary-800', value: '#3e6940' },
  { key: '--color-primary-900', value: '#2a582e' },
  { key: '--color-secondary-50', value: '#efffee' },
  { key: '--color-secondary-100', value: '#b0beb0' },
  { key: '--color-secondary-200', value: '#768176' },
  { key: '--color-secondary-300', value: '#404941' },
  { key: '--color-secondary-400', value: '#758874' },
  { key: '--color-secondary-500', value: '#6a7f69' },
  { key: '--color-secondary-600', value: '#5f755f' },
  { key: '--color-secondary-700', value: '#546c55' },
  { key: '--color-secondary-800', value: '#49634b' },
  { key: '--color-secondary-900', value: '#3e5a41' },
]

for (const brandColor of freebrandColors) {
  document.body.style.setProperty(brandColor.key, brandColor.value)
}
```

Overwrite fonts by loading the font faces. Has to be loaded last in order for the overwrite to work.

```css
@font-face {
 font-family: 'Font-Regular';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url('../fonts/Font-Regular.ttf') format('truetype');
}

@font-face {
 font-family: 'Font-Bold';
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url('../fonts/Font-Bold.ttf') format('truetype');
}

@font-face {
 font-family: 'Font-Italic';
 font-style: italic;
 font-weight: 400;
 font-display: swap;
 src: url('../fonts/Font-Italic.ttf') format('truetype');
}

@font-face {
 font-family: 'Font-Bold-Italic';
 font-style: italic;
 font-weight: 700;
 font-display: swap;
 src: url('../fonts/Font-Bold-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Fallback-font';
  src: local(Verdana);
  advance-override: 125%;
  ascent-override: 95%;
  descent-override: -25%;
  line-gap-override: 25%;
}

```
